<template>
<!-- 分类详情页面 -->
    <div class="fa">
        <div class="top container">
        <img src="../assets/img/logo.gif" alt="" />
        <div class="box">
            <div>
            <router-link to="/search" tag="input"
                type="search"
                class="inp1"
                placeholder="输入菜名、食材、作者"
                
            />
            <router-link to="/search" tag="input" type="submit" class="inp2 fa" value=""  />
            </div>
        </div>
        </div>

    <div class="h1">
        <h2>{{property}}</h2> <router-link tag="a" to="/classify"><span>切换分类</span></router-link>
    </div>

    <div class="listto container">
        <div class="fl" v-for="(item,index) in dataitem" :key="index" >
            <img :src="item.img" alt="">
            <h3>{{item.h3}}</h3>
            <p>{{item.p}}</p>
        </div>
        
    </div>
    
     <!-- <div class="bottom container">
        <ul>
            <li>
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li>
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li>
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
        </div> -->
    </div>
</template>

<script>
import{getinitdata} from "../api/home.js"
    export default {
        data() {
            return {
                property: null,
                dataitem: null,
            };
        },
        created(){
            getinitdata().then(data=>{
                this.dataitem = data.item;
            })
            // 获取路由传参
            if("item" in this.$route.query){
                let {item} =this.$route.query;
                this.property=item;
            }
        }
    }
</script>

<style lang="scss">
 @import "../assets/css/init.css";
 .h1{
        padding: 10px;
        margin-bottom: 8px;
        border-left: 3px solid #00a2ca;
        background-color: #fbfbfb;
        display: flex;
        justify-content: space-between;
        a{
            color: #666;
            font-size: 14px;
            line-height: 24px;
        }
        h2{
            font-size: 18px;
        }
    }
    
</style>